<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:replace="layout (title='新闻资讯')">
<script src="../static/js/element.js"></script>
<div th:fragment="content">
    <div class="m2ban wOpacity wow fadeIn" data-wow-delay="0.0s"
         th:style="${'background-image:url('+bannerInfo.imgSrc+')'}">
        <div class="m2banTxt">
            <div class="m2ban_t1 wOpacity wow fadeInUp" data-wow-delay="0.2s" th:text="${bannerInfo.title}"></div>
        </div>
    </div>
    <div class="m2menu wOpacity wow fadeIn" data-wow-delay="0.3s">
        <a href="/news" th:class="${'m2menu_a' + (currentPid == 5 ? ' on' : '')}">
            <span class="m2menuIcon"><img src="images/m2n_i1a.png" width="40" height="40">
                <img class="iOpacity"
                     src="images/m2n_i1.png"
                     width="40"
                     height="40"></span>
            <p>全部</p>
        </a>
        <a th:each="type,iterStat : ${typeList}" th:href="${'/news?pid='+type.id}"
           th:class="${'m2menu_a' + (currentPid == type.id ? ' on' : '')}">
            <span class="m2menuIcon"><img th:src="${'images/m2n_i'+(iterStat.index+2)+'a.png'}" width="40" height="40">
                <img class="iOpacity"
                     th:src="${'images/m2n_i'+(iterStat.index+2)+'.png'}"
                     width="40"
                     height="40"></span>
            <p th:text="${type.title}"></p>
        </a>
    </div>
    <div class="container" id="app">
        <ul class="m2nul wOpacity wow fadeIn" data-wow-delay="0.0s">
            <li th:each="news : ${newsList}" class="wOpacity wow fadeIn" data-wow-delay="0.3s">
                <a th:href="${'/content?id='+news.id}" class="m2nul_aBox scaleImg">
                    <div class="overflowHide">
                        <div class="bgImg"><img th:src="${news.imgSrc}" width="400" height="220"></div>
                    </div>
                    <div class="m2nulTxt">
                        <strong class="ellipsis" th:text="${news.title}"></strong>
                        <div class="m2ntm dsPcPad"
                             th:utext="${'<span>'+#dates.format(news.updateTime, 'dd') + '</span>' + #dates.format(news.updateTime, 'yyyy-MM')}">
                        </div>
                        <div class="m2ntm2 dsPhone" th:text="${#dates.format(news.updateTime, 'yyyy-MM-dd')}">
                        </div>
                        <p th:utext="${news.realTitle}"></p>
                        <span class="transition">了解更多</span>
                    </div>
                </a>
            </li>
        </ul>
        <div class="page wOpacity wow fadeIn" data-wow-delay="0.3s">
            <div id="pager"></div>
        </div>
    </div>

    <script th:inline="javascript">
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'pager'
                ,count: [[${page.totalCount}]]
                ,limit:[[${page.pageSize}]]
                ,curr:[[${page.currentPage}]]
                ,theme: '#1E9FFF'
                ,jump: function(obj, first){
                    if(!first){
                        location.href='/news?pid='+[[${currentPid}]]+'&page='+obj.curr;
                    }
                }
            });
        });
        $(function () {
            $("#newsLi").addClass("hover");
        })
    </script>
</div>
</html>